<template>
  <a-layout>
    <a-layout-header :style="{ textAlign: 'center' }">{{ appTabsActiveTitle }}</a-layout-header>
    <a-layout-content> <router-view /></a-layout-content>
    <a-layout-footer>
      <app-tabs
        :appTabsActiveKey="appTabsActiveKey"
        :appTabsPanes="appTabsPanes"
        @change="handleChangeKey"
      />
    </a-layout-footer>
  </a-layout>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { Layout } from 'ant-design-vue';
  import AppTabs from '/@/components/AppTabs.vue';
  import { useAppTabs } from '../hooks/useTabs';
  export default defineComponent({
    name: 'vueName',
    components: {
      [Layout.name]: Layout,
      [Layout.Header.name]: Layout.Header,
      [Layout.Content.name]: Layout.Content,
      [Layout.Footer.name]: Layout.Footer,
      AppTabs,
    },
    setup() {
      const { appTabsPanes, appTabsActiveKey, appTabsActiveTitle, handleChangeKey } = useAppTabs();
      return {
        appTabsPanes,
        appTabsActiveKey,
        appTabsActiveTitle,
        handleChangeKey,
      };
    },
  });
</script>

<style scoped lang="less"></style>
